<template>
    <div class="test-container">
      <div class="test-header"></div>
      <div class="test-content"></div>
      <div class="test-bottom"></div>
    </div>
</template>

<script>
 export default {
    data() {
        return {}
    }
 }
</script>

<style lang="less" scoped>
.test-container {
  background-color: darkgray;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.test-header {
  background-color: gray;
  height: 60px;
}
.test-content {
  background-color: green;
  flex: 1;
}
.test-bottom {
  background-color: yellow;
  height: 60px;
}
</style>